---
title: Sintaxe do Astro
description: Uma introdução à sintaxe de componente .astro .
i18nReady: true
---

**Se você conhece HTML, já sabe o suficiente para escrever seu primeiro componente Astro.**

A sintaxe de componente Astro é uma extensão do HTML. A sintaxe foi [projetada para soar familiar a qualquer um com experiência em escrever HTML ou JSX](#diferenças-entre-astro-e-jsx), e adiciona suporte para incluir componentes e expressões JavaScript.


## Expressões parecidas com JSX

Você pode definir variáveis locais do JavaScript dentro do script frontmatter do componente entre as duas cercas de código (`---`) de um componente Astro. Você pode então injetar essas variáveis no modelo HTML do componente usando expressões parecidas com JSX!

:::note[Dinâmico vs reativo]
Usando essa abordagem, você pode incluir valores **dinâmicos** que são calculados no frontmatter. Mas uma vez incluídos, esses valores não são **reativos** e nunca mudarão. Componentes Astro são modelos que só executam uma vez durante a etapa de renderização.

Veja abaixo mais exemplos de [diferenças entre Astro e JSX](#diferenças-entre-astro-e-jsx).
:::

### Variáveis

Variáveis locais podem ser adicionadas ao HTML usando a sintaxe de chaves:

```astro title="src/components/Variaveis.astro" "{nome}"
---
const nome = "Astro";
---
<div>
  <h1>Olá {nome}!</h1>  <!-- Produz <h1>Olá Astro!</h1> -->
</div>
```

### Atributos Dinâmicos

Variáveis locais podem ser usadas entre chaves para passar valores de atributos tanto para elementos HTML como para componentes:

```astro title="src/components/AtributosDinamicos.astro" "{nome}" "${nome}"
---
const nome = "Astro";
---
<h1 class={nome}>Expressões de atributo são suportadas</h1>

<MeuComponente atributoTemplateLiteralNome={`MeuNomeE${nome}`} />
```

:::caution
Atributos HTML vão ser convertidos para strings, portanto não é possível passar funções e objetos para elementos HTML.
Por exemplo, você não pode atribuir um manipulador de eventos a um elemento HTML em um componente Astro:

```astro title="nao-faca-isso.astro"
---
function tratarClique () {
    console.log("botão clicado!");
}
---
<!-- ❌ Isso não funciona! ❌ -->
<button onClick={tratarClique}>Nada vai acontecer quando você me clicar!</button>
```

Em vez disso, use um script no lado do cliente para adicionar o manipulador de evento, como você faria no JavaScript vanilla:

```astro title="faca-isso-em-vez-disso.astro"
---
---
<button id="botao">Clique em Mim</button>
<script>
  function tratarClique () {
    console.log("botão clicado!");
  }
  document.getElementById("botao").addEventListener("click", tratarClique);
</script>
```
:::

### HTML Dinâmico

Variáveis locais podem ser usadas em funções parecidas com JSX para produzir elementos HTML gerados dinamicamente:

```astro title="src/components/HtmlDinamico.astro" "{item}"
---
const itens = ["Cachorro", "Gato", "Ornitorrinco"];
---
<ul>
  {itens.map((item) => (
    <li>{item}</li>
  ))}
</ul>
```

Astro pode exibir HTML condicionalmente usando operadores lógicos JSX e expressões ternárias.

```astro title="src/components/HtmlCondicional.astro" "visivel"
---
const visivel = true;
---
{visivel && <p>Mostre-me!</p>}

{visivel ? <p>Mostre-me!</p> : <p>Ou mostre-me!</p>}
```

### Tags Dinâmicas

Você também pode usar tags dinâmicas ao atribuir a uma variável o nome de uma tag HTML ou um componente importado:

```astro title="src/components/TagsDinamicas.astro" /Elemento|(?<!Meu)Componente/
---
import MeuComponente from "./MeuComponente.astro";
const Elemento = 'div'
const Componente = MeuComponente;
---
<Elemento>Olá!</Elemento> <!-- renderiza como <div>Olá!</div> -->
<Componente /> <!-- renderiza como <MeuComponente /> -->
```

Ao usar tags dinâmicas:

- **Os nomes de variáveis devem iniciar com maiúsculas.** Por exemplo, use `Elemento`, não `elemento`. Caso contrário, Astro tentará renderizar o nome da sua variável como uma tag HTML literal.

- **Diretivas de hidratação não são suportadas.** Ao usar as [diretivas de hidratação `client:*`](/pt-br/guides/framework-components/#hydrating-interactive-components), o Astro precisa saber quais componentes devem fazer parte do bundle para produção, e o padrão de tags dinâmicas impede que isso funcione.

- **A [diretiva define:vars](/pt-br/reference/directives-reference/#definevars) não é suportada.** Se você não puder envolver os filhos com um elemento extra (como `<div>`), então você pode adicionar manualmente um ``style={`--myVar:${value}`}`` ao seu Elemento.

### Fragmentos

O Astro suporta usar tanto `<Fragment></Fragment>` como a abreviação `<></>`.

Fragmentos podem ser úteis para evitar elementos de invólucro ao adicionar [diretivas `set:*`](/pt-br/reference/directives-reference/#sethtml), como no exemplo seguinte:

```astro title="src/components/SetHtml.astro" "Fragment"
---
const stringHtml = '<p>Conteúdo HTML bruto</p>';
---
<Fragment set:html={stringHtml} />
```

### Diferenças entre Astro e JSX

A sintaxe de componente Astro é um superconjunto do HTML. Ela foi projetada para parecer familiar a qualquer um com experiência com HTML ou JSX, mas existem algumas diferenças importantes entre arquivos `.astro` e JSX.

#### Atributos

No Astro, você usa o formato padrão `kebab-case` para todos os atributos HTML em vez do `camelCase` usado no JSX. Isso funciona até para o `class`, que não é suportado pelo React.

```jsx del={1} ins={2} title="exemplo.astro"
<div className="caixa" dataValue="3" />
<div class="caixa" data-value="3" />
```

#### Múltiplos Elementos

O modelo de um componente do Astro pode renderizar vários elementos sem a necessidade de envolver tudo em uma única `<div>` ou `<>`, diferente do JavaScript ou JSX.

```astro title="src/components/ElementosRaiz.astro"
---
// Modelo com múltiplos elementos
---
<p>Não precisa envolver elementos dentro de um único elemento.</p>
<p>Astro suporta múltiplos elementos raiz em um modelo.</p>
```

#### Comentários

No Astro, você pode usar comentários HTML padrão ou comentários no estilo JavaScript.

```astro title="exemplo.astro"
---
---
<!-- A sintaxe de comentários HTML é válida em arquivos .astro -->
{/* A sintaxe de comentários JS também é válida */}
```

:::caution
Os comentários no estilo HTML serão incluídos no DOM do navegador, enquanto os JS serão ignorados. Para deixar mensagens TODO ou outras explicações somente em desenvolvimento, você pode querer usar comentários no estilo JavaScript.
:::
